<template>
	<view class="hui">
		<view class="head">
			<u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" bgColor="transparent">
				<view class="u-nav-slot b_flex_c" slot="center">
					<view class="city">订单详情</view>
				</view>
			</u-navbar>
		</view>

		<view class="i_head">{{info.order_status_msg}}</view>

		<view class="b_flex_c a_box">
			<u-icon name="map"></u-icon>
			<view class="a_right">
				<view class="b_flex_c_s b_m_b">
					<view class="b_f_w">{{info.users.nickname}}</view>
					<view>{{info.users.mobile}}</view>
				</view>
				<view>{{info.fc.name}}</view>
				<view>{{info.fc.site}}</view>
			</view>
		</view>

		<view class="goods_box">
			<view class="title">
				商品信息
			</view>
			<view>
				<view class="goods_info b_flex" v-for="(item,index) in info.goods" :key="index">
					<image v-if="item.goods_img" class="l_img" :src="item.goods_img"></image>
					<view class="goods_right">

						<view class="l_name">{{item.goods_name}}</view>
						<view class="l_name">{{item.sku_guige}}</view>
						<view class="b_flex_c_s">
							<view class="red">￥{{item.market_price}}</view>
							<view class="num">下单数量: x{{item.buy_num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="goods_box">
			<view class="title">
				金额信息
			</view>
			<view class="total-fee">
				<text>商品总价</text>
				<text>￥{{info.total_price}}</text>
			</view>
			<view class="total-fee" v-if="info.fw>0">
				<text>服务费</text>
				<text>￥{{info.fw}}</text>
			</view>
			<view class="total-fee" v-if="info.freight>0">
				<text>实付运费</text>
				<text>￥{{info.freight}}</text>
			</view>
			<view class="total-fee" v-if="info.jrs>0">
				<text>金融手续费</text>
				<text>￥{{info.jrs}}</text>
			</view>
			<view class="total-fee" v-if="info.yh>0">
				<text>优惠费用</text>
				<text>-￥{{info.yh}}</text>
			</view>
			<view class="total-fee" v-if="info.pay_total<=0">
				<text>应付款：</text>
				<text class="red">￥{{info.hj}}</text>
			</view>
			<view class="total-fee" v-else>
				<text>实付款：</text>
				<text class="red" v-if="info.pay_total">￥{{info.pay_total}}</text>
				<text class="red" v-else>￥0</text>
			</view>
		</view>

		<view class="goods_box">
			<view class="title">
				支付信息
			</view>
			<view class="total-fee">
				订单编号：{{info.order_num}}
			</view>
			<view class="total-fee">下单时间：{{info.createtime}}</view>
			
			<view class="total-fee" v-if="info.pay_type">支付方式：
				{{info.pay_type}}
			</view>
			<view class="total-fee">
				支付状态：{{info.pay_status}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderInfo
	} from '@/require/api';
	export default {
		data() {
			return {
				params: {
					id: ''
				},
				info: ''
			}
		},
		onLoad(e) {
			if (e.id) {
				this.params.id = e.id;
			}
			this.getInfo();
		},
		methods: {
			async getInfo() {
				let {
					code,
					data
				} = await orderInfo(this.params);
				if (code == 1) {
					this.info = data;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-navbar--fixed {
			background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
		}

	}

	.head {
		background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
	}

	.i_head {
		height: 100rpx;
		color: white;
		line-height: 100rpx;
		background: #FF7133;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-weight: bold;
	}

	.a_box {
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		background-color: white;
	}

	.a_right {
		width: 90%;
		margin-left: 5%;
		font-size: 28rpx;
	}

	.goods_box {
		box-sizing: border-box;
		padding: 0 30rpx 30rpx 30rpx;
		background-color: white;
		margin-top: 30rpx;
	}

	.title {
		padding: 15rpx 0;
		font-size: 36rpx;
		border-bottom: 1px solid #eee;
		font-weight: bold;
	}

	.l_img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.goods_info {
		box-sizing: border-box;
		padding: 30rpx 0 0rpx 0;
	}

	.goods_right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 72%;
	}

	.red {
		color: #F01D1D;
	}

	.num {
		font-size: 22rpx;
		color: #999;
	}

	.total-fee {
		box-sizing: border-box;
		padding: 20rpx 0 0 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}
</style>